<template>
  <div>
    <div class="i-box" style="--h: 3rem;">
      <XmolBox title="Xgauge" style="--freeH: 100%">
        <Xgauge :seriesData="seriesData" class="mtb10" :detail="gaugeDetail" :titleSet="titleSet" style="height: 68%" v-if="showChart"></Xgauge>
      </XmolBox>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<Xgauge :seriesData="seriesData" class="mtb10" :detail="gaugeDetail" :titleSet="titleSet" style="height: 68%" v-if="showChart"></Xgauge>`'></div>
      </div>
      <div>
        <p class="tt">seriesData</p>
        <p><span class="td">数据参考：</span>{{seriesData}}</p>
        <p class="col-white2">ps：通常此处value值给百分率，0-100；</p>
      </div>
      <div>
        <p class="tt">detail（中心展示内容）</p>
        <p><span class="td">数据参考：</span>{{gaugeDetail}}</p>
      </div>
      <div>
        <p class="tt">titleSet（中心展示title）</p>
        <p><span class="td">数据参考：</span>{{gaugeDetail}}</p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    let clientWidth = document.documentElement.clientWidth;
    let w = (clientWidth / 1280) * 100 * 0.1;
    let colorConfig = this.$store.state.colorConfig;
    return {
      // 仪表盘
      seriesData: [ { 'name': '养殖户', 'value': 88.89 } ],
      gaugeDetail: {
        fontSize: w * 1.8,
        formatter: '{value}%'
      },
      showChart: true,
      titleSet: {
        show: true,
        color: colorConfig.fontColor,
        fontSize: w * 0.9,
        offsetCenter: [0, '35%']
      }
    };
  },
  mounted () {
    // this.getSeriesData();
  },
  methods: {}
};
</script>
